<template>
  <div>
    <a-spin :spinning="confirmLoading">
      <z-form-container :disabled="disableSubmit">
        <a-form-model slot="detail" layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
          <a-row>
            <a-col :span="6" >
              <a-form-model-item label="所属单位" >
                <a-input placeholder="请输入所属单位" disabled v-model="form.units"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="6" >
              <a-form-model-item label="单据日期">
                <a-date-picker placeholder="请选择单据日期" class="w-full" disabled v-model="form.orderDate"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="6" >
              <a-form-model-item label="单据编号">
                <a-input placeholder="请输入单据编号" disabled v-model="form.bizNo"/>
              </a-form-model-item>
            </a-col>
            <a-divider orientation="left">
              基本信息
            </a-divider>
            <a-col :span="6">
              <a-form-model-item label="经办人">
                <ZSelectUserByDep v-model="form.operator" placeholder="请选择经办人" :button="false" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="申请人">
                <ZSelectUserByDep v-model="form.applicant" placeholder="请选择申请人" :button="false" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="6" >
              <a-form-model-item label="是否员工">
                <z-dict-select-tag v-model="form.isStaff" placeholder="请选择是否员工"  dictCode="MB_SYSTEM_YES_NO"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="6" >
              <a-form-model-item label="经办人手机号">
                <a-input placeholder="请输入经办人手机号" disabled v-model="form.phone"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="6" >
              <a-form-model-item label="申请人部门">
                <ZSelectDept placeholder="请选择申请人部门" v-model="form.applyDept"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="6" >
              <a-form-model-item label="业务类型" prop="businessType">
                <z-dict-select-tag v-model="form.businessType" placeholder="请选择业务类型"  dictCode="MB_SYSTEM_YES_NO"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="6" >
              <a-form-model-item label="应付余额">
                <a-input type="number" placeholder="请输入应付余额" v-model="form.balanceDue">
                  <span slot="suffix">元</span>
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="申请付款金额">
                <a-input type="number" placeholder="请输入申请付款金额" v-model="form.applyAmount">
                  <span slot="suffix">元</span>
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="凭证摘要">
                <a-input v-model="form.abstract" placeholder="请输入凭证摘要"  />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="扣款金额">
                <a-input type="number" placeholder="请输入扣款金额" v-model="form.deductionAmount">
                  <span slot="suffix">元</span>
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6" >
              <a-form-model-item label="支付金额">
                <a-input type="number" placeholder="请输入支付金额" disabled v-model="form.payAmount">
                  <span slot="suffix">元</span>
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6" >
              <a-form-model-item label="事项说明">
                <a-input v-model="form.memo" placeholder="请输入事项说明"  />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
       </z-form-container>
      <a-tabs v-model="activeKey">
        <a-tab-pane :key="refKeys[0]" tab="结算信息" forceRender>
          <vxe-grid
            :ref="refKeys[0]"
            :columns="account.column"
            :data="account.dataSource"
            :edit-rules="account.validRules"
            v-bind="vxeTableOption"
            :toolbar-config="false"
          >
          </vxe-grid>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </div>
</template>

<script>
// 自定义表单，数据存储在流程表
import moment from 'moment'
import ModalFormMixin from '@/components/k-form-design/mixins/ModalFormMixin'
import { CURY_TYPE } from '@/store/mutation-types'
import { mapGetters } from 'vuex'
import { sngenerate } from '@/services/common'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import ZSelectDept from '@/components/zzbiz/ZSelectDept'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import ZFormContainer from '@/components/zz/ZFormContainer'
export default {
  name: 'CustomForm',
  components: {
    ZDictSelectTag,
    ZSelectUserByDep,
    ZSelectDept,
    ZFormContainer
  },
  mixins: [ModalFormMixin],
  data() {
    return {
      validatorRules: {
        applicant: [{ required: true, message: '请选择申请人' }],
        travelType: [{ required: true, message: '请选择出差类型' }],
        applyDept: [{ required: true, message: '请选择申请人部门' }],
        memo: [{ required: true, message: '请输入出差说明' }]
      },
      account: {
        column: [
          { type: 'checkbox', width: 50 },
          { type: 'seq', width: 40 },
          { title: '支付方式', field: 'paymentMethod', editRender: { name: 'AInput' }, width: 150 },
          { title: '供应商', field: 'customerId', width: 150, formatter: 'dictText' },
          { title: '收款账户', field: 'accountNo', width: 120 },
          { title: '收款户名', field: 'accountName', width: 200 },
          { title: '收款账号', field: 'accountNumber', width: 200 },
          { title: '收款银行名称', field: 'bankName', width: 200 },
          { title: '收款金额', field: 'amount', width: 150 },
          { title: '付款银行账户', field: 'paymentAccount', editRender: { name: 'AInput' }, width: 200 },
          { title: '是否线上支付', field: 'isOnlinePayment', editRender: { name: 'ZDictSelectTag', props: { dictCode: 'MB_SYSTEM_YES_NO' }}, width: 150 }
        ],
        dataSource: [],
        validRules: {
          paymentMethod: [
            { required: true, message: '请选择支付方式', trigger: 'change' }
          ],
          paymentAccount: [
            { required: true, message: '请选择付款银行账户', trigger: 'change' }
          ]
        }
      },
      refKeys: ['account'],
      activeKey: 'account'
    }
  },
  computed: {
    ...mapGetters('account', ['user'])
  },
  methods: {
    addAfter() {
      sngenerate('YJBZJ${YYYY}${MM}${DD}#####').then(res => {
        if (res.success) {
          this.$set(this.form, 'orderDate', moment().format('YYYY-MM-DD'))
          this.$set(this.form, 'operator', this.user.username)
          this.$set(this.form, 'applicant', this.user.username)
          this.$set(this.form, 'phone', this.user.phone)
          this.$set(this.form, 'applyDept', this.user.dept?.deptCode)
          this.$set(this.form, 'bizNo', res.result)
        }
      })
    },
    // 组装主从表数据后，保存使用
    classifyIntoFormData() {
      const accountRecordset = this.$refs[this.refKeys[0]].getRecordset()
      const accountData = this.setDataCrud(accountRecordset)

      this.form.crudType = this.editType === 'add' ? CURY_TYPE.SAVE : CURY_TYPE.UPDATE
      return {
        ...this.form,
        account: [...accountData]
      }
    },
    // 表单设计器调用获取值--- 必须
    async getData() {
      try {
        await this.getAllValidate()
        const formData = this.classifyIntoFormData()
        return formData
      } catch (error) {
        console.error(error)
        throw new Error(error)
      }
    },
    // 表单设计器调用设置值--- 必须
    setData(data) {
      this.form = Object.assign({}, data)
      this.account.dataSource = data.account
    }
  },
  mounted() {
    // 判断是否新增，初始化数据
    if (!this.disableSubmit) {
      this.addAfter()
    }
  }
}
</script>
